<template>
  <div v-if="eleItem && eleItem.key" class="container">
    <el-form label-position="top">
      <!-- 表单名称 -->
      <el-form-item label="标题" class="form-borderbottom">
        <el-input
          v-model="eleItem.name"
          :disabled="eleItem.options.nameDisabled"
          :maxlength="10"
        ></el-input>
      </el-form-item>
      <!-- 表单绑定的model -->
      <!-- <el-form-item label="数据绑定字段" class="form-borderbottom">
        <el-input v-model="eleItem.model"></el-input>
      </el-form-item> -->
      <!-- 设置表单宽度 -->
      <!-- <template v-if="eleItem.options.hasOwnProperty('width')">
        <el-form-item label="表单宽度" class="form-borderbottom">
          <el-input v-model="eleItem.options.width"></el-input>
        </el-form-item>
      </template> -->
      <!-- 表单提示语句 -->
      <template v-if="eleItem.options.hasOwnProperty('placeholder')">
        <el-form-item label="提示语句" class="form-borderbottom">
          <el-input v-model="eleItem.options.placeholder"></el-input>
        </el-form-item>
      </template>
      <!-- 组件公共配置项目 ：是否必填 -->
      <template v-if="eleItem.options.hasOwnProperty('required')">
        <el-form-item label="是否必填" class="form-borderbottom">
          <el-switch
            v-model="eleItem.options.required"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
        <!-- 错误提示语句 -->
        <!-- <el-form-item
          v-if="eleItem.options.required"
          label="自定义错误提示语句"
          class="form-borderbottom"
        >
          <el-input
            v-model="eleItem.options.requiredMsg"
            placeholder="自定义错误提示语句"
          >
          </el-input>
        </el-form-item> -->
      </template>
      <!-- 多行文本 -->
      <!-- <template v-if="eleItem.type === 'textarea'">
        <el-form-item label="行数" class="form-borderbottom">
          <el-input
            type="number"
            min="1"
            v-model="eleItem.options.rows"
          ></el-input>
        </el-form-item>
      </template> -->
      <!-- 输入框 -->
      <!-- <template v-if="eleItem.type === 'input'"> -->
      <!-- 是否是密码 -->
      <!-- <el-form-item label="密码框" class="form-borderbottom">
          <el-switch
            v-model="eleItem.options.password"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      </template> -->
      <!-- 多选框组 -->
      <!--      <template v-if="eleItem.type === 'checkbox'">-->
      <!--        &lt;!&ndash; 最大选择个数 &ndash;&gt;-->
      <!--        <el-form-item label="最大选择个数" class="form-borderbottom">-->
      <!--          <el-input-->
      <!--              v-model="eleItem.options.max"-->
      <!--              placeholder="请输入最大选择个数"-->
      <!--              type="number"-->
      <!--          >-->
      <!--          </el-input>-->
      <!--        </el-form-item>-->
      <!--      </template>-->
      <template v-if="eleItem.type === 'inputNumber'">
        <!-- 最小值 -->
        <el-form-item label="最小值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.min"
            placeholder="请输入最小值"
            type="number"
          >
          </el-input>
        </el-form-item>
        <!-- 最大值 -->
        <el-form-item label="最大值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.max"
            placeholder="请输入最大值"
            type="number"
          >
          </el-input>
        </el-form-item>
        <!-- 控制按钮位置 -->
        <el-form-item label="控制按钮位置" class="form-borderbottom">
          <el-radio-group v-model="eleItem.options.position">
            <el-radio label="">默认</el-radio>
            <el-radio label="right">右侧</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <!-- 下拉框 -->
      <template v-if="eleItem.type === 'select'">
        <!-- 是否可多选 -->
        <!-- <el-form-item label="是否可多选" class="form-borderbottom">
          <el-switch
            v-model="eleItem.options.multiple"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item> -->
      </template>
      <template v-if="eleItem.type === 'slider'">
        <!-- 默认值 -->
        <el-form-item label="默认值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.defaultValue"
            type="number"
            placeholder="请输入默认值"
          >
          </el-input>
        </el-form-item>
        <!-- 最小值 -->
        <el-form-item label="最小值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.min"
            placeholder="请输入最小值"
            type="number"
          >
          </el-input>
        </el-form-item>
        <!-- 最大值 -->
        <el-form-item label="最大值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.max"
            placeholder="请输入最大值"
            type="number"
          >
          </el-input>
        </el-form-item>
      </template>
      <!-- 评分 -->
      <template v-if="eleItem.type === 'rate'">
        <!-- 默认值 -->
        <el-form-item label="默认值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.defaultValue"
            type="number"
            placeholder="请输入默认值"
          >
          </el-input>
        </el-form-item>
        <!-- 最大值 -->
        <el-form-item label="最大值" class="form-borderbottom">
          <el-input
            v-model.number="eleItem.options.max"
            placeholder="请输入最大值"
            type="number"
          >
          </el-input>
        </el-form-item>
        <!-- 辅助文字 -->
        <el-form-item label="辅助文字" class="form-borderbottom">
          <el-switch
            v-model="eleItem.options.text"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      </template>
      <!-- 日期选择器 -->
      <template v-if="eleItem.type === 'datePicker'">
        <!-- 可选时间 -->

        <el-form-item label="日期分类" class="form-borderbottom">
          <el-radio-group v-model="dateRange" class="date-type-group">
            <el-radio label="single">单个日期</el-radio>
            <el-radio label="range">区间日期</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="日期类型" class="form-borderbottom">
          <el-radio-group
            @change="changeDateType"
            v-model="dateTime"
            class="date-type-group"
          >
            <el-radio label="date">仅日期</el-radio>
            <el-radio label="datetime">日期与时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="示例" class="form-borderbottom">
          <el-date-picker
            style="width: 100%"
            v-model="eleItem.options.defaultValue"
            placeholder="选择日期"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="eleItem.options.valueFormat"
            :default-value="new Date()"
            :type="eleItem.options.type"
            :disabled="eleItem.options.disabled"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <!-- 文字 -->
      <template v-if="eleItem.type === 'text'">
        <!-- 编辑文字 -->
        <el-form-item label="编辑文字" class="form-borderbottom">
          <el-input
            v-model="eleItem.options.defaultValue"
            placeholder="请输入文字"
            type="textarea"
            autosize
          >
          </el-input>
        </el-form-item>
        <!-- 位置 -->
        <el-form-item label="位置" class="form-borderbottom">
          <el-radio-group v-model="eleItem.options.position">
            <el-radio label="">靠左对齐</el-radio>
            <el-radio label="center">居中对齐</el-radio>
            <el-radio label="end" style="margin-top: 10px">靠右对齐</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 字体颜色 -->
        <el-form-item label="字体颜色" class="form-borderbottom">
          <el-color-picker
            @active-change="changeTextColor"
            v-model="eleItem.options.color"
          ></el-color-picker>
        </el-form-item>
        <!-- 字体大小 -->
        <el-form-item label="字体大小" class="form-borderbottom">
          <el-input-number
            v-model="eleItem.options.size"
            :min="1"
            label="字体大小"
          ></el-input-number>
        </el-form-item>
        <!-- 字体粗细 -->
        <el-form-item label="字体粗细" class="form-borderbottom">
          <el-radio-group v-model="eleItem.options.weight">
            <el-radio label="">默认</el-radio>
            <el-radio label="700">加粗</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 字体倾斜 -->
        <el-form-item label="字体倾斜" class="form-borderbottom">
          <el-radio-group v-model="eleItem.options.style">
            <el-radio label="">默认</el-radio>
            <el-radio label="italic">倾斜</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 首行缩进 -->
        <el-form-item label="首行缩进" class="form-borderbottom">
          <el-input-number
            :min="0"
            v-model="eleItem.options.indent"
            label="首行缩进"
          ></el-input-number>
        </el-form-item>
        <!-- 字体缩进 -->
        <el-form-item label="字体缩进" class="form-borderbottom">
          <el-input-number
            :min="0"
            v-model="eleItem.options.leftPadding"
            label="字体缩进"
          ></el-input-number>
        </el-form-item>
        <!-- 字体行间距 -->
        <el-form-item label="字体行间距" class="form-borderbottom">
          <el-input-number
            :min="0"
            v-model="eleItem.options.lineHeight"
            label="字体行间距"
          ></el-input-number>
        </el-form-item>
      </template>
      <!-- 级联选择器-->
      <template v-if="eleItem.type === 'cascader'">
        <el-form-item class="form-borderbottom">
          <template #label>
            <div class="select__title">
              <div>多级选项</div>
              <div>
                <i class="el-icon-edit c-link"></i>
                <el-button type="text" @click="cascaderVisible = true"
                  >编辑多级选项</el-button
                >
              </div>
            </div>
          </template>
          <el-tree
            class="c-border cascadertree"
            :data="eleItem.options.valueData"
          ></el-tree>
        </el-form-item>
        <el-dialog
          title="编辑多级选项"
          :visible.sync="cascaderVisible"
          width="800px"
          v-if="cascaderVisible"
          :close-on-click-modal="false"
        >
          <TreeMoel ref="TreeMoel" :tree="eleItem.options.valueData"></TreeMoel>
          <div class="btn">
            <div>
              <el-button
                type="text"
                icon="el-icon-circle-plus"
                @click="cascaderAddChildren"
                >增加一级</el-button
              >
            </div>
            <div>
              <el-button type="primary" @click="onSaveCascader">确定</el-button>
              <el-button @click="cascaderVisible = false">取消</el-button>
            </div>
          </div>
        </el-dialog>
      </template>
      <!-- 图片-->
      <template v-if="eleItem.type === 'photo'">
        <el-form-item>
          <template #label>
            <div class="select__title">
              <div>图片格式</div>
              <div>
                <el-checkbox v-model="photoAllSelected">全选</el-checkbox>
              </div>
            </div>
          </template>
          <el-checkbox-group
            class="select__area"
            v-model="eleItem.options.accept"
          >
            <el-checkbox :label="item" v-for="item in photoFormat" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>
      <!-- 文件-->
      <template v-if="eleItem.type === 'file'">
        <el-form-item>
          <template #label>
            <div class="select__title">
              <div>图片格式</div>
              <div>
                <el-checkbox v-model="filePhotoAllSelected">全选</el-checkbox>
              </div>
            </div>
          </template>
          <el-checkbox-group
            class="select__area"
            v-model="eleItem.options.accept.photo"
          >
            <el-checkbox :label="item" v-for="item in photoFormat" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <template #label>
            <div class="select__title">
              <div>视频格式</div>
              <div>
                <el-checkbox v-model="fileVideoAllSelected">全选</el-checkbox>
              </div>
            </div>
          </template>
          <el-checkbox-group
            class="select__area"
            v-model="eleItem.options.accept.video"
          >
            <el-checkbox :label="item" v-for="item in videoFormat" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <template #label>
            <div class="select__title">
              <div>音频格式</div>
              <div>
                <el-checkbox v-model="fileAudioAllSelected">全选</el-checkbox>
              </div>
            </div>
          </template>
          <el-checkbox-group
            class="select__area"
            v-model="eleItem.options.accept.audio"
          >
            <el-checkbox :label="item" v-for="item in audioFormat" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <template #label>
            <div class="select__title">
              <div>文档格式</div>
              <div>
                <el-checkbox v-model="fileDocSelected">全选</el-checkbox>
              </div>
            </div>
          </template>
          <el-checkbox-group
            class="select__area"
            v-model="eleItem.options.accept.doc"
          >
            <el-checkbox :label="item" v-for="item in docFormat" :key="item">
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </template>
      <!-- 分割线 -->
      <template v-if="eleItem.type === 'divider'">
        <!-- 分割线文案 -->
        <el-form-item label="分割线文案" class="form-borderbottom">
          <el-input
            v-model="eleItem.options.defaultValue"
            placeholder="分割线文案"
          ></el-input>
        </el-form-item>
        <!-- 文案位置 -->
        <el-form-item
          label="文案位置"
          class="form-borderbottom"
          v-if="eleItem.options.defaultValue"
        >
          <el-radio-group v-model="eleItem.options.position">
            <el-radio label="left">靠左对齐</el-radio>
            <el-radio label="center">居中对齐</el-radio>
            <el-radio label="right" style="margin-top: 10px">靠右对齐</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <!--   多组件共享配置：单选框和多选框和下拉框   -->
      <template
        v-if="
          eleItem.type === 'radio' ||
          eleItem.type === 'checkbox' ||
          eleItem.type === 'select'
        "
      >
        <!-- <el-form-item label="是否显示标签" class="form-borderbottom">
          <el-switch
            v-model="eleItem.options.isTag"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item> -->
        <el-form-item label="选项组" class="form-borderbottom">
          <draggable
            v-model="eleItem.options.valueData"
            animation="300"
            class="dragg-ui"
            handle=".i-success"
          >
            <div class="value__key">
              <div class="value-label-input">
                <!-- <div>标签值</div> -->
                <!-- <div>数据值</div> -->
              </div>
            </div>
            <li v-for="(item, index) in eleItem.options.valueData" :key="index">
              <div class="value-label-input">
                <el-input v-model="item.label" @blur="labelChange(item, index)">
                </el-input>
                <template v-if="eleItem.type === 'select'">
                  <!-- 设置显示的值 -->
                  <!-- <el-input v-model="item.label"> </el-input> -->
                  <!-- 设置绑定的值 -->
                  <!-- <el-input v-model="item.value"></el-input> -->
                </template>
                <template v-else>
                  <!-- 设置显示的值 -->
                  <!-- <el-input v-model="item.value"></el-input> -->
                  <!-- 设置绑定的值 -->
                  <!-- <el-input v-model="item.label"> </el-input> -->
                </template>
              </div>
              <!-- <i class="el-icon-rank i-success"></i> -->
              <i
                class="el-icon-delete i-danger"
                style="cursor: pointer"
                @click="removeEleItemValueData(index)"
              ></i>
            </li>
          </draggable>
          <el-button type="text config-addbtn" @click="addEleItemValueData"
            >添加选项</el-button
          >
        </el-form-item>
      </template>
      <!-- 组件共享配置 ： display -->
      <template v-if="eleItem.type === 'radio' || eleItem.type === 'checkbox'">
        <!-- 布局方法 -->
        <!-- <el-form-item label="布局方法" class="form-borderbottom">
          <el-radio-group v-model="eleItem.options.inline">
            <el-radio label="inline-block">行内</el-radio>
            <el-radio label="block">块级</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </template>
      <!-- 组件公共配置项目 ： 最大输入长度 -->
      <template v-if="eleItem.options.hasOwnProperty('maxlength')">
        <el-form-item label="最大输入长度" class="form-borderbottom">
          <el-input
            type="number"
            :placeholder="
              eleItem.type === 'textarea' ? '请输入1~999' : '请输入1~99'
            "
            v-model.number="eleItem.options.maxlength"
            @blur="onLengthChange"
          >
          </el-input>
        </el-form-item>
      </template>
      <template v-if="eleItem.options.hasOwnProperty('minlength')">
        <el-form-item label="最小输入长度" class="form-borderbottom">
          <el-input
            type="number"
            :placeholder="
              eleItem.type === 'textarea' ? '请输入1~999' : '请输入1~99'
            "
            v-model.number="eleItem.options.minlength"
            @blur="onLengthChange"
          >
          </el-input>
        </el-form-item>
      </template>

      <!-- 组件公共配置项目 ： 是否禁用 -->
      <!-- <el-form-item
        label="是否禁用"
        class="form-borderbottom"
        v-if="eleItem.type !== 'text' && eleItem.type !== 'divider'"
      >
        <el-switch
          v-model="eleItem.options.disabled"
          active-text="是"
          inactive-text="否"
        >
        </el-switch>
      </el-form-item> -->
      <!-- 组件公共配置项目 ： 是否可清空 -->
      <!-- <template v-if="eleItem.options.hasOwnProperty('clearable')">
        <el-form-item label="是否可清空" class="form-borderbottom">
          <el-switch
            v-model="eleItem.options.clearable"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      </template> -->
    </el-form>
  </div>
  <div v-else class="tip">请从左侧基础组件中选择合适组件</div>
</template>

<script>
import draggable from "vuedraggable";
import TreeMoel from "./components/TreeModel";
import { photoFormat, videoFormat, audioFormat, docFormat } from "../../config";
import { flatData } from "@/utils/index";
export default {
  props: {
    eleItem: {
      type: Object,
    },
  },
  data() {
    return {
      cascaderVisible: false,
      photoFormat,
      videoFormat,
      audioFormat,
      docFormat,
    };
  },
  components: {
    draggable,
    TreeMoel,
  },
  computed: {
    dateRange: {
      get() {
        return this.eleItem.options.type === "date" ||
          this.eleItem.options.type === "datetime"
          ? "single"
          : "range";
      },
      set(v) {
        if (v === "single") {
          this.eleItem.options.type =
            this.dateTime === "date" ? "date" : "datetime";
        } else if (v === "range") {
          this.eleItem.options.type =
            this.dateTime === "date" ? "daterange" : "datetimerange";
        }
      },
    },
    dateTime: {
      get() {
        return this.eleItem.options.type === "date" ||
          this.eleItem.options.type === "daterange"
          ? "date"
          : "datetime";
      },
      set(v) {
        if (v === "date") {
          this.eleItem.options.type =
            this.dateRange === "single" ? "date" : "daterange";
        } else if (v === "datetime") {
          this.eleItem.options.type =
           ( this.dateRange === "single" ? "datetime" : "datetimerange");
        }
      },
    },
    //图片 全选
    photoAllSelected: {
      get() {
        if (this.eleItem.type !== "photo") {
          return false;
        }
        return this.commonArray(this.eleItem.options.accept, photoFormat);
      },
      set(v) {
        this.eleItem.options.accept = v ? photoFormat : [];
      },
    },
    //文件 图片 全选
    filePhotoAllSelected: {
      get() {
        if (this.eleItem.type !== "file") {
          return false;
        }
        return this.commonArray(this.eleItem.options.accept.photo, photoFormat);
      },
      set(v) {
        this.eleItem.options.accept.photo = v ? photoFormat : [];
      },
    },
    //文件 音频 全选
    fileAudioAllSelected: {
      get() {
        if (this.eleItem.type !== "file") {
          return false;
        }
        return this.commonArray(this.eleItem.options.accept.audio, audioFormat);
      },
      set(v) {
        this.eleItem.options.accept.audio = v ? audioFormat : [];
      },
    },
    //文件 视频全选
    fileVideoAllSelected: {
      get() {
        if (this.eleItem.type !== "file") {
          return false;
        }
        return this.commonArray(this.eleItem.options.accept.video, videoFormat);
      },
      set(v) {
        this.eleItem.options.accept.video = v ? videoFormat : [];
      },
    },
    //文件 文档 全选
    fileDocSelected: {
      get() {
        if (this.eleItem.type !== "file") {
          return false;
        }
        return this.commonArray(this.eleItem.options.accept.doc, docFormat);
      },
      set(v) {
        this.eleItem.options.accept.doc = v ? docFormat : [];
      },
    },
  },
  watch: {
    eleItem: {
      handler(data) {
        console.log("传入的config", data);
        // 不需要展示标题的组件集合
        let noShowNameData = ["text", "divider"];
        if (noShowNameData.some((item) => item === data.type)) {
          data.name = "";
        }
        this.$emit("update:eleItem", data);
      },
    },
  },
  methods: {
    commonArray(arr1, arr2) {
      arr1.sort(); //
      arr2.sort();
      return arr1.join("-") === arr2.join("-");
    },
    // 改变日期选择器的类型触发
    changeDateType(e) {
      this.eleItem.options.valueFormat =
        e === "datetime" ? "yyyy-MM-dd HH:mm:ss" : "yyyy-MM-dd";
    },
    // 改变文字颜色是实时改变页面中的文字颜色
    changeTextColor(e) {
      this.eleItem.options.color = e;
    },
    // 删除选项
    removeEleItemValueData(index) {
      if (this.eleItem.options.valueData.length < 3) {
        this.$message.error("至少有两个选项!");
        return;
      }
      this.eleItem.options.valueData.splice(index, 1);
    },
    labelChange(item, index) {
      if (!item.label) {
        this.$set(this.eleItem.options.valueData, index, {
          value: "选项" + (index + 1),
          label: "选项" + (index + 1),
        });
      }
      if(this.eleItem.type==='checkbox'){
        item.label =item.label.replace(new RegExp(",", "g"), "")
      }   
    },
    // 添加选项
    addEleItemValueData() {
      // 随机生成4位数防止报key重复错误
      const length = this.eleItem.options.valueData.length + 1;
      this.eleItem.options.valueData.push({
        value: "选项" + length,
        label: "选项" + length,
      });
    },
    onLengthChange() {
      const max = this.eleItem.options.maxlength;
      const min = this.eleItem.options.minlength;
      const MAX = this.eleItem.type === "textarea" ? 999 : 99;
      if (max !== "" && min !== "" && max < min) {
        this.eleItem.options.maxlength = MAX;
        this.eleItem.options.minlength = 1;
        this.$message.error("最小长度应该小于最大长度");
        return;
      }
      if (
        this.eleItem.options.maxlength < 1 ||
        this.eleItem.options.maxlength > MAX
      ) {
        this.eleItem.options.maxlength = MAX;
      }
      if (
        this.eleItem.options.minlength < 1 ||
        this.eleItem.options.minlength > MAX
      ) {
        this.eleItem.options.minlength = 1;
      }
    },
    cascaderAddChildren() {
      this.$refs.TreeMoel.addChildren();
    },
    onSaveCascader() {
      const data = this.$refs.TreeMoel.getData();
      const leaf = flatData(data).filter(
        (i) => !i.children || !i.children.length
      );
      if (leaf.length < 2) {
        this.$message.error("至少有两个选项!");
        return false;
      }
      this.eleItem.options.valueData = data;
      this.cascaderVisible = false;
      this.$message.success("选项更新成功");
    },
  },
  mounted() {
    console.log("config", this.eleItem);
  },
};
</script>

<style lang="scss" scoped>
.container {
}
.date-type-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.form-borderbottom {
  // margin-bottom: 15px !important;
  // padding-bottom: 8px;
  // border-bottom: 1px solid #e1e1e1;
}
.dragg-ui {
  display: grid;
  grid-auto-columns: 1fr;
  gap: 5px;
}
.dragg-ui > li {
  display: grid;
  grid-template-columns: 5fr 1fr 1fr;
  justify-items: right;
  align-items: center;
}
.value-label-input {
  // display: grid;
  // grid-template-columns: repeat(2, 1fr);
  // gap: 5px;
  width: 100%;
}
.value_input {
  /*横跨两列开始 grid*/
  grid-column-start: span 2;
}
.i-success {
  padding: 4px;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}
.i-danger {
  padding: 4px;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  background-color: rgb(245, 108, 108);
  border-color: rgb(245, 108, 108);
}
.c-row {
  display: flex;
  align-items: center;
  &__sb {
    justify-content: space-between;
  }
}
.select {
  &__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__area {
    border-radius: 4px;
    border: 1px solid #f2f2f2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 20px;
  }
}
.value__key {
  display: grid;
  grid-template-columns: 5fr 1fr 1fr;
  align-items: center;
}
.tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: #409eff;
}
.c-border {
  border-radius: 4px;
  border: 1px solid #e5e7ec;
}
.cascadertree {
  min-height: 250px;
}
::v-deep .el-dialog__body {
  height: 500px;
}
::v-deep .el-form-item__label {
  width: 100%;
}
.c-link {
  color: #66b1ff;
}
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
</style>
